<template>
    <div class="content-wrapper">
      <div class="row">
        <div class="col-12 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <form class="form-inline" @submit="research" @submit.native.prevent>
                <label for="inlineFormInputName2">ID：</label>
                <input type="number" min="0" class="form-control mb-2 mr-sm-2" v-model="pileId">
                &nbsp;&nbsp;&nbsp;
                <label for="inlineFormInputGroupUsername2">充电站ID：</label>
                <div class="input-group mb-2 mr-sm-2">
                  <input type="number" min="0" class="form-control" v-model="stationId">
                </div>
                &nbsp;&nbsp;&nbsp;
                  <label for="exampleSelectGender">状态：</label>
                  <div class="input-group mb-2 mr-sm-2">
                    <select class="form-control" v-model="status">
                      <option value='-1' selected>全部</option>
                      <option value="0">使用中</option>
                      <option value="1">空闲</option>
                      <option value="2">故障</option>
                    </select>
                  </div>
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                <button type="submit" class="btn btn-primary mb-2">搜索</button>
                &nbsp;&nbsp;&nbsp;
                <button type="reset" class="btn btn-info mb-2" @click="getAll">重置</button>
                &nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-danger mb-2" data-toggle="modal" data-target="#addNewItem">新增</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 stretch-card">
          <div class="card">
            <div class="card-body">
                <p class="card-title" style="font-size:30px">充电桩信息表</p>
                <div class="alert alert-success" role="alert" v-show="deleteRes === 1">
                删除成功
                </div>
                <div class="alert alert-danger" role="alert" v-show="deleteRes === 2">
                删除失败
                </div>
                <hr>
                <div class="table-responsive">
                    <table id="recent-purchases-listing" class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>充电桩ID</th>
                            <th>充电站ID</th>
                            <th>充电站名称</th>
                            <th>状态</th>
                            <th>电压</th>
                            <th>电流</th>
                            <th>最大功率</th>
                            <th>使用次数</th>
                            <th>总用电量</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in data" :key="index">
                            <td>{{index+1}}</td>
                            <td>{{item.id}}</td>
                            <td>{{item.stationId}}</td>
                            <td>{{item.stationName}}</td>
                            <td v-if="item.status === 0">使用中</td>
                            <td v-else-if="item.status === 1">空闲</td>
                            <td v-else>故障</td>
                            <td>{{item.voltage}}</td>
                            <td>{{item.current}}</td>
                            <td>{{item.maxPower}}</td>
                            <td>{{item.count}}</td>
                            <td>{{item.totalPower}}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-rounded btn-fw" data-toggle="modal" data-target="#alterItem" @click="alterPile(item.id)">编辑</button>
                                &nbsp;
                                <button type="button" class="btn btn-danger btn-rounded btn-fw" @click="deletePile(item.id)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <br>
                <div class="col-md-6">当前 {{page}} 页,总 {{pageSum}} 页,总 {{number}} 条记录
                    每页
                    <select id="pageSize" v-model="pageSize" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                        <option value="5" >5</option>
                        <option value="7" >7</option>
                        <option value="10" >10</option>
                    </select>
                    条记录
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li class="page-item"><a class="page-link" v-on:click = "changePage(1)">首页</a></li>
                        <ul class="pagination justify-content-end" v-for="index in pageSum">
                            <li class="page-item"><a class="page-link" @click = "changePage(index)">{{index}}</a></li>
                        </ul>
                        <li class="page-item"><a class="page-link" v-on:click = "changePage(pageSum)">尾页</a></li>
                    </ul>
                </nav>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="addNewItem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">新增充电桩信息</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="alert alert-success" role="alert" v-show="flag === 1">
            添加成功
            </div>
            <div class="alert alert-danger" role="alert" v-show="flag === 2">
            添加失败
            </div>
            <form id="formData" class="form-horizontal">
            <div class="modal-body">
            <div class="form-group">
            <label class="control-label col-lg">所属充电站ID：</label>
            <div class="col-lg-9">
            <input type="number" name="stationID" min="0" class="form-control" v-model="iStationId">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">电压：</label>
            <div class="col-lg-9">
            <input type="number" name="voltage" min="0" class="form-control" v-model="iVoltage">
            </div>
            </div>            
            <div class="form-group">
            <label class="control-label col-lg">电流：</label>
            <div class="col-lg-9">
            <input type="number" name="current" min="0" class="form-control" v-model="iCurrent">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">最大功率：</label>
            <div class="col-lg-9">
            <input type="number" name="maxPower" min="0" class="form-control" v-model="iMaxPower">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">状态：</label>
            <div class="col-lg-9">
            <select class="form-control" v-model="iStatus">
              <option value="0">使用中</option>
              <option value="1">空闲</option>
              <option value="2">故障</option>
            </select>
            </div>
            </div>
            </div>
            </form>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" @click="add">添加</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="alterItem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">修改充电桩信息</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="alert alert-success" role="alert" v-show="flag === 1">
            修改成功
            </div>
            <div class="alert alert-danger" role="alert" v-show="flag === 2">
            修改失败
            </div>
            <form id="formData" class="form-horizontal">
            <div class="modal-body">
            <div class="form-group">
            <label class="control-label col-lg">所属充电站ID：</label>
            <div class="col-lg-9">
            <input type="number" name="stationID" min="0" class="form-control" v-model="oStationId">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">电压：</label>
            <div class="col-lg-9">
            <input type="number" name="voltage" min="0" class="form-control" v-model="oVoltage">
            </div>
            </div>            
            <div class="form-group">
            <label class="control-label col-lg">电流：</label>
            <div class="col-lg-9">
            <input type="number" name="current" min="0" class="form-control" v-model="oCurrent">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">最大功率：</label>
            <div class="col-lg-9">
            <input type="number" name="maxPower" min="0" class="form-control" v-model="oMaxPower">
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-lg">状态：</label>
            <div class="col-lg-9">
            <select class="form-control" v-model="oStatus">
              <option value="0">使用中</option>
              <option value="1">空闲</option>
              <option value="2">故障</option>
            </select>
            </div>
            </div>
            </div>
            </form>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" @click="alter">修改</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
    import http from '../axios/http'
    import { onMounted, watch, ref } from 'vue'

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    let data = ref()
    let number = ref()
    let page = ref(1)
    let pageSize = ref(5)
    let pageSum = ref()
    let pileId = ref('')
    let stationId = ref('')
    let status = ref('-1')

    onMounted(()=>
        {
            getAll()
        }
    )

    async function getAll()
    {
      data.value = await http.get('/admin/charge-pile/page?page=1&pageSize=5&pileId=&stationId=&status=')
      status.value = -1
      pileId = ref('')
      stationId = ref('')
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    }

    watch(pageSize,async (pS)=>
    {
      if(status.value == -1)
      {
          data.value = await http.get('/admin/charge-pile/page?page=1&pageSize='+pS+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status=')
      }
      else{
        data.value = await http.get('/admin/charge-pile/page?page=1&pageSize='+pS+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status='+status.value)
      }
      page.value=1
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    })

    const changePage=async (pageNum)=>{
      if(status.value == -1)
      {
          data.value = await http.get('/admin/charge-pile/page?page='+pageNum+'&pageSize='+pageSize.value+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status=')
      }
      else{
        data.value = await http.get('/admin/charge-pile/page?page='+pageNum+'&pageSize='+pageSize.value+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status='+status.value)
      }
      page.value=pageNum
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    }

    const research = async ()=>{
      if(status.value == -1)
      {
          data.value = await http.get('/admin/charge-pile/page?page=1&pageSize='+pageSize.value+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status=')
      }
      else{
        data.value = await http.get('/admin/charge-pile/page?page=1&pageSize='+pageSize.value+'&pileId='+pileId.value+'&stationId='+stationId.value+'&status='+status.value)
      }
      page.value = 1
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
      
    }

    let iCurrent = ref()
    let iVoltage = ref()
    let iStationId = ref()
    let iMaxPower = ref()
    let iStatus = ref()
    let flag = ref()

    const add = async ()=>{
      let params = {
        "count": 0,
        "current": iCurrent.value,
        "id": 0,
        "isLocked": 0,
        "maxPower": iMaxPower.value,
        "stationId": iStationId.value,
        "status": iStatus.value,
        "totalPower": "",
        "voltage": iVoltage.value
      }

      let result = await http.post("/admin/charge-pile",params)
      if(result.data.code == 1)
      {
        flag.value = 1
        sleep(2000)
        location.reload()
      }
      else{
        flag.value = 2
      }
    }

    let deleteRes = ref()

    const deletePile = async (pile)=>{
      let result = await http.delete("/admin/charge-pile/"+pile)
      if(result.data.code == 1)
      {
        deleteRes.value = 1
        sleep(2000)
        location.reload()
      }
      else{
        deleteRes.value = 2
      }
    }

    let oCurrent = ref()
    let oVoltage = ref()
    let oStationId = ref()
    let oMaxPower = ref()
    let oStatus = ref()
    let alterId = ref()

    const alterPile = async (pile)=>{
      let result = await http.get("/admin/charge-pile/"+pile)
      oCurrent.value = result.data.data.current
      oVoltage.value = result.data.data.voltage
      oStationId.value = result.data.data.stationId
      oMaxPower.value = result.data.data.maxPower
      oStatus.value = result.data.data.status
      alterId.value = pile
    }

    const alter = async ()=>{
      let params = {
        "id":alterId.value,
        "current": oCurrent.value,
        "maxPower": oMaxPower.value,
        "stationId": oStationId.value,
        "status": oStatus.value,
        "voltage": oVoltage.value
      }
      
      let alterRes = await http.put("/admin/charge-pile",params)
      if(alterRes.data.code == 1)
      {
        flag.value = 1
        sleep(2000)
        location.reload()
      }
      else{
        flag.value = 2
      }
    }

</script>

<style scope>

</style>